//验证手机验证码弹窗
import { useState, useEffect, useMemo } from 'react';
import { Form, Button, Input, Alert, Select, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getCurrentUser } from '@/utils/authority';
import { getCode, verificationCode } from '@/services/user';
import { getImg } from './service';

const layout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 13,
  },
};

const CheckCellPhoneCodeModal = ({ visible, handleCancel, handleOk }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [countDown, setCount] = useState(0);

  useEffect(() => {
    if (visible) {
      form.resetFields();
    }
  }, [visible]);

  useEffect(() => {
    if (countDown) {
      setTimeout(() => {
        setCount(countDown - 1);
      }, 1000);
    }
  }, [countDown]);

  //获取验证码
  const handleGetCode = async (val) => {
    setLoading(true);
    setCount(59);
    const res = await getCode({
      mobile: getCurrentUser()?.mobile,
      type: 9,
    });
    if (res.success) {
      message.success('验证码发送成功!');
    }
    setLoading(false);
  };

  //验证码提交
  const onOk = () => {
    form
      .validateFields()
      .then(async (val) => {
        setLoading(true);
        const res = await verificationCode({
          code: val.smsCode,
          phone: getCurrentUser()?.mobile,
          type: 9,
        });
        if (res.success) {
          handleOk(res.data);
        }
        setLoading(false);
      })
      .catch(() => {});
  };

  return (
    <CommonModal
      title="输入验证码"
      visible={visible}
      onOk={onOk}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="ok" onClick={onOk} type="primary">
          确定
        </Button>,
      ]}
    >
      <p style={{ fontSize: '15px', padding: '6px 0 8px 16px' }}>
        请输入主账号手机号验证码，校验通过才可查看照片
      </p>
      <Form name="get-phone-code" form={form} {...layout}>
        <Form.Item label="手机号">
          <div className="flex">
            <span>
              {getCurrentUser().mobile
                ? getCurrentUser().mobile.replace(
                    getCurrentUser().mobile.substring(3, 7),
                    '****'
                  )
                : ''}
            </span>
            <Button
              style={{ marginLeft: 24 }}
              onClick={() => handleGetCode()}
              disabled={countDown}
            >
              获取验证码{countDown ? `(${countDown})` : ''}
            </Button>
          </div>
        </Form.Item>

        <Form.Item
          label="手机验证码"
          name="smsCode"
          rules={[{ required: true, message: '请输入手机验证码' }]}
        >
          <div className="flex">
            <Input />
          </div>
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default CheckCellPhoneCodeModal;
